<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6', // gray-100 for page background
                        'setting-item-bg-light': '#FFFFFF', // white for setting items
                        'text-muted-light': '#6B7280', // gray-500
                        'border-light': '#E5E7EB', // gray-200 for borders
                        'toggle-bg-light': '#CBD5E1', // gray-300 for toggle off state
                        'section-title-light': '#4B5563' // gray-600 for section titles
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #F3F4F6; /* neutral-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .setting-item {
            background-color: #FFFFFF; /* setting-item-bg-light */
            /* border: 1px solid #E5E7EB; /* border-light */ Removed border for a cleaner look, relying on shadow */
        }
        .setting-item:hover {
            background-color: #F9FAFB; /* gray-50 */
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
        }
        .toggle-switch input { 
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #CBD5E1; /* toggle-bg-light */
            transition: .4s;
            border-radius: 28px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        input:checked + .slider {
            background-color: #10B981; /* primary */
        }
        input:checked + .slider:before {
            transform: translateX(22px);
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-neutral-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm flex items-center border-b border-border-light">
        <button onclick="history.back()" class="text-text-muted-light hover:text-primary mr-3">
            <i class="fas fa-chevron-left text-xl"></i>
        </button>
        <h1 class="text-xl font-semibold text-base-content-light">设置</h1>
    </header>

    <main class="flex-grow p-4 overflow-y-auto space-y-5">
        <!-- General Settings -->
        <section>
            <h2 class="text-xs font-semibold text-section-title-light uppercase mb-2 px-1">通用</h2>
            <div class="space-y-2">
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-palette w-6 text-center text-sky-500 mr-3"></i>
                        <span class="text-base-content-light">外观主题</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-sm text-text-muted-light mr-2">明亮</span>
                        <i class="fas fa-chevron-right text-text-muted-light"></i>
                    </div>
                </div>
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-bell w-6 text-center text-yellow-500 mr-3"></i>
                        <span class="text-base-content-light">通知管理</span>
                    </div>
                    <i class="fas fa-chevron-right text-text-muted-light"></i>
                </div>
            </div>
        </section>

        <!-- Data Management -->
        <section>
            <h2 class="text-xs font-semibold text-section-title-light uppercase mb-2 px-1">数据</h2>
            <div class="space-y-2">
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm">
                    <div class="flex items-center">
                        <i class="fas fa-shield-alt w-6 text-center text-red-500 mr-3"></i>
                        <span class="text-base-content-light">PIN码与生物识别</span>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-cloud-upload-alt w-6 text-center text-green-500 mr-3"></i>
                        <span class="text-base-content-light">数据备份 (本地)</span>
                    </div>
                    <i class="fas fa-chevron-right text-text-muted-light"></i>
                </div>
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-cloud-download-alt w-6 text-center text-blue-500 mr-3"></i>
                        <span class="text-base-content-light">数据恢复 (本地)</span>
                    </div>
                    <i class="fas fa-chevron-right text-text-muted-light"></i>
                </div>
                 <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-sync-alt w-6 text-center text-purple-500 mr-3"></i>
                        <span class="text-base-content-light">云同步 (高级功能)</span>
                    </div>
                    <span class="text-xs bg-primary/10 text-primary-focus font-semibold px-2 py-0.5 rounded-full">PRO</span>
                </div>
            </div>
        </section>

        <!-- About -->
        <section>
            <h2 class="text-xs font-semibold text-section-title-light uppercase mb-2 px-1">关于</h2>
            <div class="space-y-2">
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm">
                    <div class="flex items-center">
                        <i class="fas fa-info-circle w-6 text-center text-text-muted-light mr-3"></i>
                        <span class="text-base-content-light">关于嘀嗒</span>
                    </div>
                    <span class="text-sm text-text-muted-light">版本 1.0.0 (MVP)</span>
                </div>
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-question-circle w-6 text-center text-text-muted-light mr-3"></i>
                        <span class="text-base-content-light">帮助与反馈</span>
                    </div>
                    <i class="fas fa-chevron-right text-text-muted-light"></i>
                </div>
                <div class="setting-item p-4 rounded-lg flex items-center justify-between shadow-sm cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-file-contract w-6 text-center text-text-muted-light mr-3"></i>
                        <span class="text-base-content-light">用户协议与隐私政策</span>
                    </div>
                    <i class="fas fa-chevron-right text-text-muted-light"></i>
                </div>
            </div>
        </section>
        
        <!-- Image from Pexels: https://www.pexels.com/photo/man-in-black-jacket-sitting-on-chair-in-front-of-macbook-3760067/ -->
        <img src="https://images.pexels.com/photos/3760067/pexels-photo-3760067.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Settings" class="w-full h-32 object-cover rounded-lg mt-4 opacity-75">

        <div class="mt-8 mb-4">
            <button class="w-full bg-red-100 hover:bg-red-200 text-red-600 font-semibold py-3 px-4 rounded-lg transition duration-150 shadow-sm">
                退出登录 (如果支持账户)
            </button>
        </div>

    </main>

    <!-- No bottom nav on settings page, it's a deeper level page -->

</body>
</html>